<template>
	<view class="myView">
		<view :class="item == num ? 'myButton' : 'myButtonT'" v-for="(item,index) in arr" :key="item" @click="tabs(item)">
			<text>{{ item }}</text>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';

const arr = ref([0, 1, 2, 3]);
const num = ref(0)
const tabs = (e) => {
	num.value = e
};
</script>
<style lang="scss" scoped>
.myView {
	display: flex;
	justify-content: space-around;
	.myButton {
		background-color: #aaaaaa;
		padding: 0.2rem;
		width: 5rem;
		text-align: center;
		text {
			font-size: 2rem;
		}
	}
	.myButtonT {
		background-color: #0ff0f0;
		padding: 0.2rem;
		width: 5rem;
		text-align: center;
		text {
			font-size: 2rem;
		}
	}
}
</style>
